<!--#include file="top.php" -->
<style type="text/css">
.box{
margin:10px;
padding:10px;
border:1px dashed #999999;
}
</style>
<script type="text/javascript">
 
function fnTree(){
	o2js.build('o2tree');
	tree = new o2Tree({
		bind:'tree_div', 
		loadUrl: '?ctl=test&act=trees',  
		imgpath:'/misc/vendors/o2js/o2tree/images',
		rootText:'省市区',
		animate:false,
		loadAsync:true,
		loadType:'post',
		baseParams:{
			'type':'province'
		},
		loadbBefore:function(obj,val){
			obj.setBaseParams({
				'type':val.text
			});
			//result('数据开始加载:'+val.text);
		},
		loadEnd:function(obj,val,response){
			//result('数据加载完成:'+val.text);
		},
		nodeChange:function(obj,val,response){
			//result('选择变更到了:'+val.text);
		},
		nodeClick:function(obj,val,response){
			//result('单击进行了:'+val.text);
		},
		nodeDblClick:function(obj,val,response){
			//result('双击进行了:'+val.text);
		}
	});
	tree.load();
}
function fnGrid(){
	 o2js.build('o2grid');
		grids = new o2Grid({
		bind:'grid_div', 
		url:'?ctl=test&act=ajax_grid',
		imgpath:'misc/vendors/o2js/o2grid/image',
		className:'theme1',
		cols:[
			{index:'id',mapping:'a.id', name:'ID', width:40, align:'center'
			},
			{index:'name',mapping:'a.name', name:'学生', width:140,func:function(val,row_index,column_name,json,R){
				return '( '+json.number+' ) '+val;
			}},
			{index:'sex',mapping:'a.sex', name:'性别', width:70,func:function(val,row_index,column_name,json,R){
				if(val == '女'){
					return '<span style="color:red">女</span>';
				}else{
					return '<span style="color:green">男</span>';
				}
			}},
			{index:'classes',mapping:'a.classes', name:'班级', width:80
			},
			{index:'remark',mapping:'a.remark', name:'备注', width:121
			}
		],
		singleSelect:false,
		rowDblClick:function(obj,json,rowIndex,EventObject){
			alert(json.id);
		},
		baseParams:{
			test_val:'hehe'
		}
	});  
	grids.load(1); 	 
}

</script>
<button onclick="o2js.showLib()">显示当前o2js所存在的库</button>
<div class="box">
	<p>
		<button onclick="fnTree()">构造一个o2tree</button>
	</p>
	<div id="tree_div"></div>
</div>
<div class="box">
	<p>
		<button onclick="fnGrid()">构造一个o2grid</button>
	</p>
	<div id="grid_div"></div>
</div>
<div class="box">
	<p>
		<button onclick="fno2city()">构造一个o2city</button>
	</p>
	<div >
		
		<p>不用初始化值</p>
		<div>
			<span>省：</span>
			<select id="pro2"></select>
		</div>
		<div>
			<span>市：</span>
			<select id="city2"></select>
		</div>
		<div>
			<span>区：</span>
			<select id="qu2"></select>
		</div>
		
	</div>
</div>
<script type="text/javascript">
function fno2city(){
	o2js.build('o2citys');
	slt2 = new o2Linkage({
		selects:[
			{
				id:'pro2'
			},
			{
				id:'city2'
			},
			{
				id:'qu2'
			}
		]
	});
}
</script>

<div class="box">
	<p>
		<button onclick="fno2validator()" id="btn_validator_first">构造一个o2validator</button>
	</p>
	<div id="o2validator_div">
		<p>
			<label>姓名：</label>
			<input type="text" id="name" class="textbox" />
		</p>	
		<p>
			<label>出生日期：</label>
			<input type="text" id="date" class="textbox" />
		</p>
		<p>
			<input type="button" value="验证" onclick="fnvalidator()" id="btn_validator" disabled="disabled" />
		</p>
	</div>
<style type="text/css">
/* 这个自动加的样式类，如果你没有定义，那获得焦点，出错了，那些输入框就没有这些突出的样式显示了，当然，你可以自己定义 */
.ovalidator-error{
border:1px dashed #FF0000!important;
}
.ovalidator-focus{
border:1px dashed #0000CC;
}
input.textbox{
border:1px solid #999999
}
p{
margin:5px;
}
</style>
<script type="text/javascript">
function fno2validator(){
	$('#btn_validator').attr('disabled','');
	$('#btn_validator_first').attr('disabled','disabled');
	
	o2js.build('o2validator');
	
	oValidator.add([
		{
			id:'name',name:'第1行',error:'必须填写姓名',empty:false},
		{
			id:'date',name:'第2行',error:'出生日期格式要正确',type:'date'}
	]);		
}
function fnvalidator(){
	if(oValidator.pass()){
		alert('全部ok!');
	}else{
		var error_str = oValidator.error_str('\n');
		alert(error_str);
	}
}


</script>
</div>
<!--#include file="bottom.php" -->
